<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hash test</title>
  </head>
  <body>
    <button id="btn">修改 hash</button>
    <script>
      // hash变化，包括：
      // a. JS修改 url
      // b. 手动修改 url的hash
      // c. 浏览器前进、后退

      // 页面初次加载，获取 hash
      document.addEventListener("DOMContentLoaded", () => {
        console.log("hash:", location.hash);
      });

      window.addEventListener("hashchange", (event) => {
        // 通过oldURL、newURL控制前进后退
        console.log("old url", event.oldURL); //旧url
        console.log("new url", event.newURL); //新url
        console.log("hash", location.hash); //当前hash

        //通过样式display来控制显示相关页面
        // for(let i = 0; i < router.length; i++) {
        //   if(location.hash == router[i].path) { // 如果URL匹配到
        //     currentView.component.style.display = 'none'; // 关闭默认显示的页面
        //     router[i].component.style.display = 'block'; // 显示匹配到的页面
        //     currentView = router[i]; // 更改默认显示的页面为当前页面
        //     break; //匹配到之后跳出循环，提高性能
        //   }
        // }
      });

      //JS 修改 URL
      document.getElementById("btn").addEventListener("click", () => {
        location.hash = "#/user";
      });
    </script>
  </body>
</html>
